<template>
  <el-dialog title="新增" :visible="showAddOrder" width="60%" @close="showDialog">
    <!-- 表单 -->
    <el-form :inline="true" :model="addOrderList">
      <el-form-item label="店铺名称">
        <el-select v-model="addOrderList.shopName" placeholder="请选择">
          <!-- @change="changeShopName" -->
          <el-option v-for="item in shopNameData" :key="item.id" :label="item.shopName" :value="item.shopName" />
        </el-select>
      </el-form-item>
      <el-form-item label="选择用户">
        <el-select v-model="addOrderList.userName" placeholder="请选择">
          <el-option v-for="item in shopNameData" :key="item.id" :label="item.username" :value="item.username" />
        </el-select>
      </el-form-item>
      <el-form-item label="配送方式">
        <el-select v-model="addOrderList.distribution" placeholder="请选择">
          <el-option label="飞机" value="飞机" />
          <el-option label="坦克" value="坦克" />
          <el-option label="自行车" value="自行车" />
        </el-select>
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="addOrderList.status" placeholder="请选择">
          <el-option label="待支付" value="待支付" />
          <el-option label="待配送" value="待配送" />
          <el-option label="待发货" value="待发货" />
          <el-option label="已收货" value="已收货" />
          <el-option label="已支付" value="已支付" />
          <el-option label="退款" value="退款" />
        </el-select>
      </el-form-item>
      <el-form-item label="联系方式">
        <el-input v-model="addOrderList.tel" placeholder="请选择" />
      </el-form-item>
      <el-form-item label="活动优惠">
        <el-input v-model="addOrderList.ParticipateActivities" placeholder="请输入" />
      </el-form-item>
      <el-form-item label="包装">
        <el-input v-model="addOrderList.packingExpense" placeholder="请选择" />
      </el-form-item>
      <el-form-item label="优惠券">
        <el-select v-model="addOrderList.coupon" placeholder="请选择">
          <el-option label="普通优惠券" value="普通优惠券" />
          <el-option label="店面优惠券" value="店面优惠券" />
        </el-select>
      </el-form-item>
      <el-form-item label="配送费" style="width:30%">
        <el-input v-model="addOrderList.shippingFee" placeholder="请选择" />
      </el-form-item>
      <el-form-item label="配送地址">
        <el-input v-model="addOrderList.shippingAddress" type="textarea" placeholder="请选择" />
      </el-form-item>
    </el-form>
    <hr>
    <!-- 选择商品 -->
    <div>
      <h3>选择商品</h3>
      <el-table :data="LookGoodsList" @select="selectChange" @select-all="selectChange">
        <el-table-column
          type="selection"
          width="55"
        />
        <el-table-column
          label="商品编号"
          prop="goodsId"
        />
        <el-table-column
          label="商品名"
          prop="goodsName"
        />
        <el-table-column
          label="所属店铺"
          prop="shopName"
        />
        <el-table-column
          label="商品图"
          prop="goodsImg"
        />
        <el-table-column
          label="销售价"
          prop="salesPrice"
        />
        <el-table-column
          label="参与活动"
          prop="ParticipateActivities"
        />
      </el-table>
    </div>
    <!-- 分页 -->
    <div class="divSpan">
      <!-- <span class="dspan">统计￥{{ statistics }} 元 </span> -->
      <el-pagination
        class="page"
        :current-page="page.pager"
        :page-sizes="[1, 2, 3, 4]"
        :page-size="page.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <div>
      <div v-if="goodsData.id" class="divMargin">合计<span class="fonColor">￥{{ goodsDataID }} </span></div>
      <div v-else class="divMargin">合计<span class="fonColor">￥{{ statistics }} </span></div>
    </div>
    <!-- 按钮 -->
    <template v-slot:footer>
      <span class="dialog-footer">
        <el-button @click="showDialog">取 消</el-button>
        <el-button type="primary" @click="addOrder">确 定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import { getShop, getLookGoodsList } from '@/api/orderList.js'
export default {
  name: 'AddOrder',
  props: {
    showAddOrder: {
      type: Boolean,
      required: true
    },
    orderList: {
      type: Object,
      // required: true
      default: function() {
        return {}
      }
    },
    goodsData: {
      type: [Array, Object],
      default: function() {
        return []
      }
    }
  },
  data() {
    return {
      total: 0,
      statistics: 0, // 统计元
      shopNameData: {}, // 店铺的名称
      LookGoodsList: [],
      page: {
        pager: 1, // 当前页
        pageSize: 10 // 每页显示条数
      },
      addOrderList: {
        shopName: '', // 店铺名称
        userName: '', // 用户列表
        distribution: '', // 配送方式
        status: '', // 状态
        tel: '', // 联系方式
        ParticipateActivities: '', // 活动优惠
        packingExpense: '', // 包装
        coupon: '', // 优惠券
        shippingFee: '', // 配送费
        shippingAddress: '' // 配送地址
      } // 绑定的表单数据
    }
  },
  created() {
    this.getShop()
    this.getLookGoodsList()
  },
  methods: {
    // 选中选择框
    selectChange(rows) {
      var rowsNumber = 0
      rows.forEach(item => {
        rowsNumber += parseFloat(item.salesPrice)
      })
      this.statistics = rowsNumber
      return rowsNumber
    },

    // 添加订单
    async addOrder() {
      // const res = await addOrder(this.formOrder)
      // console.log(res)
    },

    // 店铺数据
    async  getShop() {
      const { data } = await getShop()
      this.orderData = data.data
    },

    // 获取所有商品数据
    async  getLookGoodsList() {
      const { data } = await getLookGoodsList(this.page)
      console.log(data)
      this.LookGoodsList = data.data
    },
    //   改变页码时
    handleSizeChange() {},
    //  当前页改变时
    handleCurrentChange() {},
    // 关闭弹窗
    showDialog() {
      this.$emit('update:showAddOrder', false)
    }
  }
}
</script>

<style lang="less">
 .elrow{
  display: flex;
  justify-content: space-between;
}
.divSpan{
  display: flex;
  justify-content: space-around;
}
.dspan{
  margin-top: 8px;
}
.divMargin{
  margin-top: 10px;
}
.fonColor{
  margin-left: 30px;
  font-size: 20px;
  color: #FA541C;
}

</style>
